<template>
  <div class="m_ind">
    <!-- 海报 -->
    <div class="banner">
      <img src="../../assets/images/index/banner_one.png" alt />
      <div class="ri_contant">
        <h3>积分兑了么</h3>
        <p>
          专业提供银行积分兑现服务，安全、快速的将银行
          积分变现
        </p>
        <span>专业团队研发软件</span>
      </div>
    </div>
    <!-- <swiper :options="mb_swiper_home">
         <swiper-slide>
        <img class="banner_h_t" src="../../assets/images/icon/home_banner03.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <div class="banner">
          <img src="../../assets/images/index/banner_one.png" alt />
          <div class="ri_contant">
            <h3>积分兑了么</h3>
            <p>
              专业提供银行积分兑现服务，安全、快速的将银行
              积分变现
            </p>
            <span>专业团队研发软件</span>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <img class="banner_h_t" src="../../assets/images/icon/home_banner02.png" alt="">
      </swiper-slide>
    </swiper>-->
    <swiper class="mswier" :options="mswiperindex">
      <swiper-slide v-for="(item,index) in swiperone" :key="index">
        <div class="m_swi_contant">
          <img :src="item.src" alt />
          <div class="m_swi_contant_con">
            <h3>{{item.title}}</h3>
            <p>{{item.info.one}}</p>
            <p>{{item.info.two}}</p>
            <p>{{item.info.three}}</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <!-- 产品优势 -->
    <div class="m_advan">
      <div class="title">
        <div class="line"></div>产品优势
      </div>
      <div
        :class="['contant',advan_index == index ? 'contant_i':'']"
        @click="lookadvan(index)"
        v-for="(item, index) in advanlist"
        :key="index"
      >
        <div class="top">
          <div class="top_l">
            <img :src="item.src1" alt />
            {{item.little_title}}
          </div>
          <div class="jt">
            <i class="iconfont iconfont1">&#xe65b;</i>
            <i class="iconfont iconfont2">&#xe65d;</i>
          </div>
        </div>
        <div class="bot">{{item.message}}</div>
      </div>
    </div>
    <!-- 行业资讯 -->
    <div class="m_information">
      <div class="title">
        <div class="line"></div>行业资讯
      </div>
      <div
        class="contant"
        @click="todetail(item.id)"
        v-for="(item,index) in infomationlist"
        :key="index"
      >
        <img :src="item.cover" alt />
        <div class="right">
          <div class="right_top">
            <div class="right_top_l">{{item.title}}</div>
            <div class="right_top_r">{{item.date}}</div>
          </div>
          <div class="infodetail">
            <div v-html="item.content"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看更多 -->
    <div class="look_more" @click="tomo">
      查看更多
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      mb_swiper_home: {
        direction: "horizontal",
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      mswiperindex: {
        direction: "horizontal",
        loop: true,
        centeredSlides: true,
        centeredSlidesBounds: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      infomationlist: [],
      swiperone: [
        {
          src: require("../../assets/images/index/letter01.png"),
          title: "积分兑了么是什么样的平台",
          info: {
            one:
              " 积分兑了么是专业提供银行积分兑现服务。通过“积分兑换券码-报单-审核提现”模式，安全、快速的将银行积分变现。"
          }
        },
        {
          src: require("../../assets/images/index/letter02.png"),
          title: "如何通过积分兑了么赚钱",
          info: {
            one: "1.个人银行积分变现",
            two: "2.会员/代理赚会员兑换差价",
            three: "3.代理赚推荐奖励。"
          }
        },
        {
          src: require("../../assets/images/index/letter03.png"),
          title: "人人都是普惠金融家",
          info: {
            one:
              " 积分兑了么的运营模式不仅为金融机构减轻运营成本，同时让大众享受金融领域福利，实现人人都是普惠金融家的梦想，实现多赢的局面。"
          }
        }
      ],
      advan_index: 20,
      // 优势列表
      advanlist: [
        {
          src1: require("../../assets/images/header/advan11.png"),
          src2: require("../../assets/images/header/advan21.png"),
          little_title: "会员等级",
          message:
            " 普通会员及代理/代理商可以通过兑换积分获得收益，代理/代理商兑现比例高于普通会员。"
        },
        {
          src1: require("../../assets/images/header/advan12.png"),
          src2: require("../../assets/images/header/advan22.png"),
          little_title: "无需繁琐的手续",
          message:
            "7*24小时随时申请，通过“积分兑换券码-报单-审核提现”模式，安全、快速的将银行积分变现。"
        },
        {
          src1: require("../../assets/images/header/advan13.png"),
          src2: require("../../assets/images/header/advan23.png"),
          little_title: "100%一手资源",
          message:
            "所有银行和三网积分兑换的上游渠道，100%自主建立，确保用户报单的安全、快速审核。"
        },
        {
          src1: require("../../assets/images/header/advan14.png"),
          src2: require("../../assets/images/header/advan24.png"),
          little_title: "代理等级",
          message:
            "享受旗下无限级别的会员/黄金会员积分兑换差价；旗下的会员充值成为代理，都有推荐奖励。"
        },
        {
          src1: require("../../assets/images/header/advan15.png"),
          src2: require("../../assets/images/header/advan25.png"),
          little_title: "金融机构达成战略",
          message:
            "平台现已经可以兑换建设、工商、中行、招商、平安、光大、交通40+银行，其他银行也即将上线。"
        },
        {
          src1: require("../../assets/images/header/advan16.png"),
          src2: require("../../assets/images/header/advan26.png"),
          little_title: "如何通过平台赚钱",
          message:
            "个人银行积分变现，代理/代理商赚会员兑换差价，代理赚推荐奖励。"
        }
      ],
      infomation: [
        {
          src: require("../../assets/images/index/industry1.png"),
          title: "积分兑了么介绍",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry2.png"),
          title: "建设银行原接收验证码兑换方式恢复",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry3.png"),
          title: "建行普卡兑换今日已上线  ",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry4.png"),
          title: "积分兑了么介绍",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        }
      ]
    };
  },
  mounted() {
    this.getinfolist();
  },
  methods: {
    tomo () {
      this.$router.push('/industry/industry')
    },
    // 获取资讯信息
    getinfolist() {
      this.ajax("web/getFourArtic", {
        success: res => {
          window.console.log(res);
          let infomation = res.msg;
          infomation.forEach(el => {
            let date = el.update_time;
            date = date.split(" ")[0];
            // window.console.log(date)
            el.date = date;
          });
          window.console.log(res);
          this.infomationlist = res.msg;
          // let date = res.msg.data.update_time
          // // date =date.split(' ')
          // window.console.log(date)
        }
      });
    },
    lookadvan(key) {
      if (this.advan_index == key) {
        this.advan_index = 20;
        return false;
      }
      this.advan_index = key;
    },
    // 资讯详情
    todetail(key) {
      this.$router.push("/industry/detail?id=" + key);
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/index/mindex.css");
</style>